<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        // ...运算符
        //  spread参数  spread->展开  （展开运算符）

        //  1.传递实参（展开数组中的每一项传递给形参）
        function fn1(a, b, c) {
            console.log(a, b, c);
        }

        fn1(...[10, 20, 30]);


        // 2.展开数组 或 展开对象（浅拷贝，数组/对象合并，类数组转为数组）
        let arr1 = [10, 20, 30];
        let arr2 = [...arr1];
        console.log(arr2);

        let obj1 = {
            name: "哈哈",
            age: 100,
            hobby: [10, 20, 30]
        };
        let obj2 = {
            ...obj1
        };
        obj2.hobby[0] = "测试";
        console.log(obj2, obj1);


        let testArr1 = [10, 20];
        let testArr2 = [30, 100];
        let testArr = [...testArr1, ...testArr2];
        console.log(testArr); //[10, 20, 30, 100]


        let testObj1 = {
            name: "哈哈",
            age: 100
        };

        let testObj2 = {
            name: "呵呵",
            sex: '未知',
            hobby: "篮球"
        };

        // 键名相同后边覆盖前边的
        let testObj = {
            ...testObj1,
            ...testObj2,
            sex:"男"
        };
        console.log(testObj);


        // 类数组转数组(展开类数组)
        let oLis = document.getElementsByTagName("li");
        console.log(oLis);

        let liArr = [...oLis];
        console.log(liArr);




        // 加薪优化
        //练习：有已知以下某公司员工薪金信息，把每一位员工的salary薪金信息 加 2000，并返回新数组，注意：不影响原数组
        var persons = [
            {
                username: '张飞',
                sex: '男',
                salary: 50000
            },
            {
                username: '关羽',
                sex: '男',
                salary: 60000
            }
        ];


    
        var resArr = persons.map(function (val, index) {
            return {
                ...val,
                salary:val.salary + 2000
            };
        });

        console.log(resArr);
    </script>
</body>

</html>